<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>首页</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link href="/wangeditor5/style.css" rel="stylesheet">
    <style>
        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100; /* 按需定义 */
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        #editor-container {
            height: 500px;
        }
    </style>
</head>
<body>
<jsp:include page="nav.jsp"/>


<div class="container-fluid">
    <div id="overDiv" style="display: none">
        <h1 style="text-align: center;display: none" >添加新闻成功，等待审核</h1>
        <a class="btn btn-success btn-sm" href="/toadd.do" target="_blank">继续新建>>></a>
    </div>

    <div class="panel" id="mainDiv">
        <div class="page-header">添加新闻</div>
        <div class="panel-body">
            <form class="form-horizontal" action="#" method="post" id="form1">
                <div class="form-group">
                    <label for="newstitle" class="col-sm-2 control-label">标题</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="newstitle" placeholder="请输入标题" value=""
                               name="title">
                    </div>
                </div>
                <div class="form-group">
                    <label for="content" class="col-sm-2 control-label">内容</label>
                    <input name="content" type="hidden">
                    <div class="col-sm-10" id="content">
                        <div id="editor—wrapper">
                            <div id="toolbar-container"></div>
                            <div id="editor-container"></div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="readCount" class="col-sm-2 control-label">已读数量</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="readCount" placeholder="" value="500"
                               name="readCount">
                    </div>
                </div>

                <div class="form-group">
                    <label for="readCount" class="col-sm-2 control-label">是否审核</label>
                    <div class="col-sm-10">
                        <label class="radio-inline">
                            <input type="radio" name="checked" id="checkedOk" value="1"> 是
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="checked" id="checkedNo" value="0" checked> 否
                        </label>
                    </div>
                </div>

                <div class="form-group">
                    <label for="readCount" class="col-sm-2 control-label">是否发布</label>
                    <div class="col-sm-10">
                        <label class="radio-inline">
                            <input type="radio" name="show" id="showOk" value="1" checked> 是
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="show" id="showNo" value="0"> 否
                        </label>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-default" id="btn-submit">提交</button>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>

</body>

<script src="/bootstrap-3.4.1-dist/js/jquery.min.js"></script>
<script src="/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<script src="/wangeditor5/index.js"></script>
<script>

    $(function () {
        const {createEditor, createToolbar} = window.wangEditor
        const editorConfig = {
            placeholder: '请输入....',
            onChange(editor) {
                const html = editor.getHtml()
                $("#form1 [name=content]").val(html)
                //console.log('editor content', html)
                // 也可以同步到 <textarea>
            }
        }
        const editor = createEditor({
            selector: '#editor-container',
            html: '<p><br></p>',
            config: editorConfig,
            mode: 'default',

        })

        const toolbarConfig = {

        }


        toolbarConfig.excludeKeys = [
            'group-image',
            'group-video',
        ]

        const toolbar = createToolbar({
            editor,
            selector: '#toolbar-container',
            config: toolbarConfig,
            mode: 'default', // or 'simple'
        })

        $("#btn-submit").click(function () {
            // console.log(toolbar.getConfig().toolbarKeys)
            let $form = $("#form1");
            // console.log($form.serialize())
            $.post("/submit_add.do", $("#form1").serialize(), function (data) {
                $("#overDiv").show();
                $("#mainDiv").hide();
            }, "json")
        })

    });

</script>
</html>